<template>
  <div class="user-detail">
    <el-button @click="goBack">
      <i class="iconfont icon-arrow-left"></i>
    </el-button>
    <div class="detail-body">
      <!--<div class="prev lf">-->
      <!--<el-button type="info">-->
      <!--<i class="iconfont icon-arrow-left"></i>-->
      <!--</el-button>-->
      <!--</div>-->
      <!--<div class="next rf">-->
      <!--<el-button type="info">-->
      <!--<i class="iconfont icon-arrow-right"></i>-->
      <!--</el-button>-->
      <!--</div>-->
      <div class="ditail-main">
        <div class="detail bg-color-white lf">
          <!-- <p class="name">
            <span class="font16" :style="{ background: '#FB8888' }">张</span>
            张三年
          </p> -->
          <div class="detail-container">
            <ul>
              <li v-for="item in userDetailList" :key="item.key">
                <el-row>
                  <el-col :span="10">{{ item.key }}</el-col>
                  <el-col :span="14">{{ item.value }}</el-col>
                </el-row>
              </li>
            </ul>
          </div>
        </div>
        <div class="recode rf bg-color-white">
          <div class="event-filtering">
            <span>日期筛选</span>
            <el-select v-model="datetime" placeholder="请选择" @change="dateChange" size="mini">
              <el-option
                v-for="item in dateList"
                :key="item.key"
                :label="item.EVENT_DATETIME_GROUP"
                :value="item.key">
              </el-option>
            </el-select>
            <span>筛选事件</span>
            <el-select v-model="eventVal" placeholder="请选择" @change="eventChange" size="mini">
              <el-option
                v-for="item in eventList"
                :key="item.event_id"
                :label="item.event_name"
                :value="item.event_id">
              </el-option>
            </el-select>
          </div>
          <userDetailechart ref="detailEcharts"></userDetailechart>
          <!--表格-->
          <div class="access-recodes">
            <div class="recode-body">
              <ul>
                <li class="font12" v-for="item in userEventList" :key="item.id">
                  <span>{{ item.event_datetime }}</span>
                  <span>{{ item.event_id }}</span>
                  <span>{{ item.event_name }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import ajax from '../../api/ajax/ajax'
  import store from '@/store'
  import userDetailechart from './userdetailine'
  import api from '../../api/url'

  let dateFormat = (item) => {
    let str1 = item.event_datetime.slice(0, item.event_datetime.length - 6).replace(/^(\d{4})(\d{2})(\d{2})$/, '$1-$2-$3')
    let str2 = item.event_datetime.slice(item.event_datetime.length - 6, item.event_datetime.length).replace(/^(\d{2})(\d{2})(\d{2})$/, '$1:$2:$3')
    return str1 + ' ' + str2
  }

  export default {
    props: {
      pageName: {
        type: String
      }
    },
    components: {
      userDetailechart
    },
    data () {
      return {
        eventVal: '', // 事件
        eventList: [], // 事件列表
        userDetailList: [], // 用户详情列表
        count: '', // 事件数量
        datetime: '', // 日期时间
        dateList: [], // 时间列表
        userEventList: []
      }
    },
    methods: {
      // 返回
      goBack () {
        this.$store.commit('updateToggleValue', this.pageName)
      },
      // 日期改变
      dateChange (date) {
        this.userEventList = []
        const params = {
          user_id: this.user_id,
          event_datetime: date
        }
        ajax.post(api.SELECTANALYSEUSEREVENTDETAIL, params).then(res => {
          res.data.forEach(item => {
            let str1 = item.event_datetime.slice(0, item.event_datetime.length - 6).replace(/^(\d{4})(\d{2})(\d{2})$/, '$1-$2-$3')
            let str2 = item.event_datetime.slice(item.event_datetime.length - 6, item.event_datetime.length).replace(/^(\d{2})(\d{2})(\d{2})$/, '$1:$2:$3')
            item.event_datetime = str1 + ' ' + str2
          })
          this.userEventList = res.data
        })
      },
      // 事件改变
      eventChange (val) {
        this.dateList = []
        const paramsData = {
          user_id: this.user_id,
          event_id: val,
          from_date: sessionStorage.getItem('from_date'),
          to_date: sessionStorage.getItem('to_date')
        }
        ajax.post(api.SELECTANALYSEUSERCHART, paramsData).then(res => {
          this.dateList = res.data
          this.dateList.forEach((item, index) => {
            item.key = item.EVENT_DATETIME
          })
          this.$refs.detailEcharts.getData(this.dateList)
        })
      }
    },
    created () {
      // 获取事件列表
      this.eventList = JSON.parse(sessionStorage.getItem('commonData')).B020002
      let data = JSON.parse(sessionStorage.getItem('commonData')).META_COLUME
      let obj = store.state.userDetailObj
      for (let k in obj) {
        if (k.indexOf('MC000002') !== -1) {
          this.user_id = obj[k]
        }
      }
      const paramsData = {
        user_id: this.user_id,
        from_date: sessionStorage.getItem('from_date'),
        to_date: sessionStorage.getItem('to_date')
      }
      this.dateList = []
      ajax.post(api.SELECTANALYSEUSERCHART, paramsData).then(res => {
        this.dateList = res.data
        if (this.dateList.length > 0) {
          this.dateList.forEach((item, index) => {
            item.key = item.EVENT_DATETIME
          })
          this.datetime = this.dateList[0].key
          this.count = this.dateList[0].EVENT_COUNT
          this.$refs.detailEcharts.getData(this.dateList)
        }
        const params = {
          user_id: this.user_id,
          event_datetime: this.datetime
        }
        ajax.post(api.SELECTANALYSEUSEREVENTDETAIL, params).then(res => {
          res.data.forEach(item => {
            item.event_datetime = dateFormat(item)
          })
          this.userEventList = res.data
        })
      })
      this.userDetailList = []
      for (let k in obj) {
        if (k.indexOf('__S__') !== -1) {
          data.forEach(item => {
            if (k.split('__')[0] === item.meta_id) {
              this.userDetailList.push({
                key: item.colume_chs,
                value: obj[k]
              })
            }
          })
        }
      }
      this.userDetailList.reverse()
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .user-detail
    height 100%
    overflow hidden
    .el-button
      display inline-block
      width 30px
      height 30px
      padding 0
      margin-bottom 10px
      i.iconfont
        color #878D99
    .detail-body
      overflow hidden
      height calc(100% - 50px)
      position relative
      .prev, .next
        width 35px
        position absolute
        top 50%
        margin-top -200px
        .el-button--info
          background-color rgba(111, 133, 154, 0.6)
          border-color rgba(111, 133, 154, 0.6)
        .el-button--info:hover
          background-color rgba(111, 133, 154, 0.3)
          border-color rgba(111, 133, 154, 0.3)
        .el-button--info:active
          background-color rgba(111, 133, 154, 0.8)
          border-color rgba(111, 133, 154, 0.8)
        .el-button
          margin 0
          display inline-block
          width 35px
          height 150px
          border-radius 0
          i.iconfont
            color #fff
      .prev
        left 0
      .next
        right 0
      .ditail-main
        height 100%
        .detail
          width 294px
          height 100%
          margin-right 10px
          .name
            height 60px
            line-height 60px
            padding-left 20px
            box-shadow 0 2px 4px 0 rgba(0, 0, 0, .1)
            span
              display inline-block
              width 30px
              height 30px
              line-height 30px
              border-radius 50%
              color #fff
              text-align center
              margin-right 3px
          /*滚动条样式*/
          .detail-container::-webkit-scrollbar /*滚动条整体样式*/
            width 4px /*高宽分别对应横竖滚动条的尺寸*/
            height 4px
          .detail-container::-webkit-scrollbar-thumb /*滚动条里面小方块*/
            border-radius 5px
            -webkit-box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
            background rgba(0, 0, 0, 0.2)
          .detail-container::-webkit-scrollbar-track /*滚动条里面轨道*/
            -webkit-box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
            border-radius 0
            background rgba(0, 0, 0, 0.1)
          .detail-container
            height 100%
            overflow-y auto
            overflow-x hidden
            ul
              li
                padding 10px 0
                border-bottom 1px solid #D8DCE5
                font-size 0
                .el-col
                  color #5A5E66
                  padding-left 10px
                  font-size 12px
                  word-break break-all
                  overflow auto
                .el-col-10
                  font-weight bold
        .recode
          height 100%
          width calc(100% - 304px)
          padding 10px
          .event-filtering
            text-align right
            padding-top 5px
            padding-right 10px
            margin-bottom 10px
          .access-recodes
            margin-top 10px
            height calc(100% - 245px)
            /*滚动条样式*/
            .recode-body::-webkit-scrollbar /*滚动条整体样式*/
              width 4px /*高宽分别对应横竖滚动条的尺寸*/
              height 4px
            .recode-body::-webkit-scrollbar-thumb /*滚动条里面小方块*/
              border-radius 5px
              -webkit-box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
              background rgba(0, 0, 0, 0.2)
            .recode-body::-webkit-scrollbar-track /*滚动条里面轨道*/
              -webkit-box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
              border-radius 0
              background rgba(0, 0, 0, 0.1)
            .recode-body
              height 100%
              overflow auto
              ul
                li
                  height 50px
                  line-height 50px
                  padding-left 10px
                  border-bottom 1px solid #D8DCE5
                  span
                    display inline-block
                    width 120px
                    margin-right 50px
</style>
